<template>
  <view :class="'icon-grid-wrap ' + className">
    <view :id="elId" ref="icon-grid" class="icon-grid" :class="{ 'icon-grid--border': showBorder }" :style="{ 'border-left-style':'solid','border-left-color':borderColor, 'border-left-width':showBorder?'1px':0 }">
      <view v-for="(item, i) in sources" :key="i" :style="{'width': width}" class="icon-grid-item" @click="iconClick(item)">
        <view v-if="item.tips" class="tips">{{ item.tips }}</view>
        <b-image class-name="icon" :src="item.icon" :width="imgWidth" :height="imgWidth"></b-image>
        <b-text type="one" :color="item.color ? item.color : '#333'" :text="item.name"></b-text>
      </view>
    </view>
  </view>
</template>

<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
export default {
  name: 'IconGrid',
  props: {
    // 每列显示个数
    sources: {
      type: Array,
      default() {
        return []
      }
    },
    className: {
      type: String,
      default: ''
    },
    // 每列显示个数
    column: {
      type: Number,
      default: 3
    },
    // 是否显示边框
    showBorder: {
      type: Boolean,
      default: true
    },
    // 图片大小
    imgWidth: {
      type: [String, Number],
      default: '50'
    },
    // 边框颜色
    borderColor: {
      type: String,
      default: 'rgba(0,0,0,0)'
    },
    // 是否正方形显示,默认为 true
    square: {
      type: Boolean,
      default: true
    },
    highlight: {
      type: Boolean,
      default: true
    }
  },
  provide() {
    return {
      grid: this
    }
  },
  data() {
    const elId = `Icon_${Math.ceil(Math.random() * 10e5).toString(36)}`
    return {
      index: 0,
      elId,
      width: 0
    }
  },
  created() {
    this.children = []
    this.index = 0
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      setTimeout(() => {
        this._getSize((width) => {
          this.sources.forEach((item, index) => {
            item.width = width
          })
        })
      }, 10)
    },
    iconClick(item) {
      this.$emit('iconClick', item)
    },
    _getSize(fn) {
      // #ifndef APP-NVUE
      uni.createSelectorQuery()
        .in(this)
        .select(`#${this.elId}`)
        .boundingClientRect(data => {
          this.width = parseInt(data.width / this.column) - 1 + 'px'
          fn(this.width)
          // console.log('得到布局位置信息' + JSON.stringify(data))
        })
        .exec(ret => {
        })
      // #endif
      // #ifdef APP-NVUE
      dom.getComponentRect(this.$refs['icon-grid'], (ret) => {
        console.log('ret', ret)
        this.width = parseInt(ret.size.width / this.column) - 1 + 'px'
        fn(this.width)
      })
      // #endif
    }
  }
}
</script>

<style lang="scss" scoped>
	.icon-grid-wrap {
    padding-top: 20rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
	}

	.icon-grid {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
    flex: 1;
    box-sizing: border-box;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.icon-grid--border {
		border-left-color: $color-border;
		border-left-style: solid;
		border-left-width: 1px;
  }
  .icon-grid-item{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    padding-bottom: 20rpx;
    .icon{
      padding-bottom: 8rpx;
    }
    .tips{
      position: absolute;
      width: 40rpx;
      height: 40rpx;
      left: 50%;
      color: white;
      background-color: #D00D2B;
      z-index: 2;
      line-height: 40rpx;
      border-radius: 50%;
      border: 6rpx solid #fff;
      transform: scale(0.6) translateX(20%);
      font-size: 24rpx;
      top: -16rpx;
    }
  }
</style>
